<template>
  <div class="dashboard-container-content-left-part1">
    <div>
      <div class="dashboard-container-content-left-part1-title">{{accountCount}} <span
          class="dashboard-container-content-left-part1-title-unit">个</span></div>
      <div class="dashboard-container-content-left-part1-title-text">账号总数</div>
    </div>
    <div>
      <div class="dashboard-container-content-left-part1-title">{{invalidateAccount}} <span
          class="dashboard-container-content-left-part1-title-unit">个</span></div>
      <div class="dashboard-container-content-left-part1-title-text">异常账号</div>
    </div>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex';

  export default {
  name: 'ContentLeftPart1',
  data() {
    return {
      accountCount: 0,
      invalidateAccount: 0
    };
  },
  computed: {
    ...mapGetters([
      'accountPermissionList',
    ])
  },
  watch: {
    accountPermissionList: {
      handler() {
        this.initData();
      },
      deep: true
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      let invalidateAccount = 0;
      this.accountCount = this.accountPermissionList.length;
      this.accountPermissionList.forEach(data => {
        if(data.k6 == '外部人员' && data.k15 == '') {
          invalidateAccount++;
        }
      });
      this.invalidateAccount = invalidateAccount;
    }
    // async initData() {
    //   let invalidateAccount = 0;
    //   const accountPermissionList = await this.$store.dispatch('accountPermission/getList');
    //   this.accountCount = accountPermissionList.length;
    //   accountPermissionList.forEach(data => {
    //     if(data.k6 == '外部人员' && data.k15 == '') {
    //       invalidateAccount++;
    //     }
    //   });
    //   this.invalidateAccount = invalidateAccount;
    // }
  }
}
</script>
<style lang="scss" scoped>
.dashboard-container-content-left-part1 {
  width: 479px;
  height: 107px;
  background: url('../../../assets/images/box01@1x.png') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;

  &-title {
    color: #F5BC32;
    font-family: DIN Condensed;
    font-weight: bold;
    font-size: 36px;
    line-height: normal;
    letter-spacing: 0px;
    text-align: left;

    &-unit {
      color: #FFFFFFD8;
      font-family: FZZongYi-M05S;
      font-weight: regular;
      font-size: 12px;
      line-height: 10px;
      letter-spacing: 0px;
      text-align: left;

    }
  }

  &-title-text {
    color: #6DDCFF;
    font-family: FZZongYi-M05S;
    font-weight: regular;
    font-size: 15px;
    line-height: 12px;
    letter-spacing: 0px;
    text-align: left;

  }
}
</style>
